<template>
  <div>
    <div class="tab-cont">
      <div class="tree">
        <MyTreeSelect :value="tree"
                      placeholder="所属机构"
                      clearable
                      :data="treeData"
                      search
                      @onSelectChange="onChangeTree">
        </MyTreeSelect>
      </div>

      <div class="input">
        <Input :value="search"
               icon="ios-search"
               placeholder=""
               @on-click="onClickInputIcon"
               @on-change="onChangeInput" />
      </div>

      <div class="switch"
           @click.stop="onClickSwitch"
           v-show="!searchVisible">
        <Icon custom="i-icon icon-xiajiantou1"
              size="18"
              class="switch-icon"
              :class="{'switch-icon-show': tabItemVisible}" />
      </div>
      <div class="line left-top"></div>
      <div class="line left-bottom"></div>
      <div class="line right-top"></div>
      <div class="line right-bottom"></div>
    </div>

    <div class="tab-item"
         v-show="tabItemVisible && !searchVisible">
      <div v-for="(item,index) in data"
           :key="index"
           :class="{'tab-item-in':currentTabsIndex==index}"
           @click="onClickTypeItem(item,index)">
        {{item.title}}
      </div>
    </div>

    <div class="tab-search"
         v-show="searchVisible">
      <div>"{{search}}"的搜索结果共{{searchCount}}条</div>
      <div @click.stop="onClickDeleteInput">清空</div>
    </div>
  </div>
</template>

<script>
import MyTreeSelect from '@/components/common/MyTreeSelect';
export default {
  props: {
    data: Array,
    searchVisible: Boolean,
    searchCount: {
      type: Number,
      default: 0
    },
    treeData: Array,
    search: String
  },
  data () {
    return {
      tabItemVisible: true,
      currentTabsIndex: 0,
      tree: '',
      treeId: ''
    }
  },
  methods: {
    onClickTabs (e) {
      this.currentTabsIndex = 0
      this.$emit('onClickTabs', e)
    },
    // 最右侧 类型 图标按钮
    onClickSwitch () {
      this.tabItemVisible = !this.tabItemVisible
    },
    // 类型列表 点击
    onClickTypeItem (item, index) {
      this.currentTabsIndex = index
      this.$emit('onClickTypeItem', item)
    },
    // 输入框图标
    onClickInputIcon () {
      this.$emit('onClickInputIcon')
    },
    onChangeInput (event) {
      console.log(event.target.value);
      this.$emit('onChangeInput', event.target.value)
    },
    // 清空输入框
    onClickDeleteInput () {
      this.$emit('onClickDeleteInput')
    },
    // 修改所属机构
    onChangeTree (section) {
      this.treeId = section.id
      this.tree = section.name
      this.$emit('onChangeTree', section.id, section.name)
    },
  },
  components: { MyTreeSelect }
}
</script>

<style lang="scss" scoped>
@import "@/scss/iviewCssReset/input";
@import "@/scss/iviewCssReset/tabs";
@import "@/scss/iviewCssReset/select";

::v-deep {
  .ivu-select-selection {
    border: none;
  }
}

.tab-cont {
  position: relative;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  margin-top: 12px;

  .tree {
    width: 120px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    ::v-deep {
      .ivu-select-selection {
        background: transparent;
      }
    }

    // .tree-title {
    //   height: 100%;
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-between;
    //   padding: 0 8px;

    //   div {
    //     color: #eee !important;
    //   }

    //   .tree-title-icon {
    //     color: #808695;
    //     transition: 0.2s;
    //   }

    //   .tree-title-icon-show {
    //     transform: rotate(180deg);
    //   }
    // }

    // .tree-cont {
    //   width: 300px;
    //   min-height: 150px;
    //   max-height: 200px;
    //   overflow: auto;
    //   background: rgba(0, 0, 0, 0.95);
    //   padding: 5px;
    // }
  }

  .input {
    flex: 1;
    ::v-deep {
      .ivu-input {
        color: rgba(255, 255, 255, 0.85);
        background: transparent;
      }
      .ivu-input-icon {
        font-size: 26px;
      }
    }
  }

  .switch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    color: rgba(255, 251, 251, 0.85);
    font-size: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;

    .switch-icon {
      transition: 0.2s;
    }

    .switch-icon-show {
      transform: rotate(180deg);
    }
  }

  .line {
    position: absolute;
    width: 4px;
    height: 1px;
    background-color: #fff;
  }

  .left-top {
    top: -1px;
    left: 0;
  }

  .left-bottom {
    bottom: -1px;
    left: 0;
  }

  .right-top {
    top: -1px;
    right: 0;
  }

  .right-bottom {
    bottom: -1px;
    right: 0;
  }
}

.tab-item {
  display: flex;
  flex-wrap: wrap;
  padding: 12px 12px 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: none;

  div {
    cursor: pointer;
    margin-bottom: 10px;
    margin-right: 12px;
    color: rgba(255, 255, 255, 0.85);
  }

  .tab-item-in {
    color: #25bb96;
  }
}

.tab-search {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: none;
  color: rgba(255, 255, 255, 0.85);
  div:last-child {
    cursor: pointer;
  }
}
</style>
